<template>
	<div class="helper-model">
		<div class="model-content">
			<div class="top-title">帮助</div>
			<!-- 关闭按钮 -->
			<image src="../../static/img/close.png" mode="" class="close-png pointer" @tap="closeModel"></image>
			<!-- 帮助板块 -->
			<!--  -->
			<div class="helper-content">
				<div class="content-top">
					<image src="../../static/img/helper-domain.png" mode=""></image>
					<span>请输入分站点域名前缀，若未开通分站点，请点击</span>
					<button @click="toRegister">注册独立站点</button>
				</div>
			</div>
			<!-- 免费体验账号模块 -->
			<div class="helper-content">
				<div class="content-top">
					<image src="../../static/img/helper-account.png" mode=""></image>
					<span>智慧CRT消防一体机免费体验账号</span>
				</div>

				<div class="content-bottom">
					<!-- 二维吗图片放置区 -->
					<div class='wechat'>
						<image src="../../static/img/wechat1.png" mode=""></image>
						<image src="../../static/img/weixin-leftarrow.png" mode="" class="arrow"></image>
						<div class="wechat-text">
							<div style="margin-bottom: 0.125rem;">扫码关注微信公众号即可领取:</div>
							<div style="color: rgba(2, 195, 255, 1);">域名/用户名/密码</div>
						</div>
						<!-- 二维码弹框 -->
						
					</div>
					
				</div>
			</div>
			<!-- 免费体验账号模块 -->
			<div class="helper-content">
				<div class="content-top">
					<image src="../../static/img/helper-book.png" mode=""></image>
					<span>智慧CRT消防一体机使用教程</span>
				</div>

				<div class="content-bottom">
					<div class="bottom-domain">
						<span style="color: rgba(255, 255, 255, 0.5);">戳→</span>
						<span><a href="https://ask.zkturing.com" target="blank">https://ask.zkturing.com</a></span>
					</div>
				</div>
			</div>

			<!-- 免费体验账号模块 -->
			<div class="helper-content">
				<div class="content-top">
					<image src="../../static/img/helper-about.png" mode=""></image>
					<span>关于我们</span>
				</div>

				<div class="content-bottom">
					<div class="bottom-domain">
						<span style="color: rgba(255, 255, 255, 0.5);">版权所有:</span>
						<span>武汉中科图灵科技有限公司</span>
					</div>

				</div>
				<div class="content-bottom">
					<div class="bottom-domain">
						<span style="color: rgba(255, 255, 255, 0.5);">官方我们:</span>
						<a href="https://www.zkturing.com" target="blank">https://www.zkturing.com</a>
					</div>

				</div>
				<div class="content-bottom">
					<div class="bottom-domain">
						<span style="color: rgba(255, 255, 255, 0.5);">联系电话:</span>
						<span style="font-size: 20px;color: rgba(2, 195, 255, 1);">400-689-6718</span>
					</div>

				</div>
			</div>
			<div class="footer">
				<span>鸣谢：中国建筑科学院建筑防火研究所  陈延龙老师</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			//子传父关闭弹窗
			closeModel() {
				this.$emit('isHelperShow', false)
			},
			toRegister() {
				window.open('https://my.iot.store/')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.helper-model {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 2000;
		overflow-y: auto;

		.model-content {
			padding-bottom: 25px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 8.1625rem;
			min-width: 500px;

			background: #01192E;
			z-index: 3;

			//头部主题
			.top-title {
				height: 70px;
				text-align: center;
				color: rgba(2, 195, 255, 1);
				line-height: 70px;
				font-size: 18px;
			}

			.top-title::after {
				content: '';
				display: block;
				position: absolute;
				width: 100%;
				top: 60px;
				opacity: 0.1;
				border: 1px solid #1ACFFF;
			}

			//关闭按钮
			.close-png {
				position: absolute;
				width: 17px;
				height: 19px;
				right: 20px;
				top: 19px;

			}

			.helper-content {
				padding: 0.25rem 0.25rem;
				display: flex;
				margin: 0.25rem 0.2rem 0.1875rem 0.25rem;
				background: linear-gradient(180deg, rgba(6, 39, 75, 0.5) 0%, rgba(3, 46, 79, 0.5) 100%);
				border-radius: 10px;
				backdrop-filter: blur(0px);
				color: rgba(255, 255, 255, 0.8);
				flex-direction: column;

				.content-top {
					display: flex;
					align-items: center;
					font-family: 'PingFangSC-Medium';
				}

				.content-bottom {
					margin-left: 0.1rem;
					display: flex;
					margin-top: 0.125rem;

					div {
						margin-right: 0.625rem;

						span {
							margin-right: 0.1rem;
						}

						a {
							cursor: pointer;
							color: rgba(2, 195, 255, 1);
							text-decoration: none;
						}
					}
					.wechat{
						display: flex;
						align-items: center;
					}
					image{
						width: 1.155rem;
						height: 1.155rem;
					}
					.arrow{
						width: 0.2375rem;
						height: 0.1875rem;
					}
				}

				image {
					width: 28px;
					height: 28px;
					margin-right: 0.125rem;
				}

				button {
					margin-left: 10px;
					width: 1.5rem;
					height: 30px;
					background-color: rgba(2, 195, 255, 0.7);
					line-height: 30px;
					color: rgb(255, 255, 255);
					font-size: 14px;
					border-radius: 2px;

				}

				button::after {
					border: none;
				}
			}
			.footer{
				padding: 10px 0;
				text-align: center;
				color: rgba(255, 255, 255, 0.5000);
			}
		}


	}
</style>
